import React from 'react';
import { connect } from 'react-redux';

import { TeacherFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';
import RecommendationLineAreaChart from '../../components/dump/charts/RecommendationLineAreaChart';
import PieChart from '../../components/dump/charts/PieChart';

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import FlatButton from 'material-ui/lib/flat-button';

import { ENUM_VIEW } from '../../../schema/constants';

import { 
	RECOMMENDATION_FLOW_URL, RECOMMENDATION_SOURCE_URL,
	getRecommendationData } 
	from '../../actions/examination-analysis/recommendationAction';
import { setCondition } from '../../actions/fixup-work/conditionAction';

import omit from 'lodash/object/omit';
import moment from 'moment';
import { DATE_FORMATTER } from '../../../schema/constants';

const map = {
	// 名师推荐
	201: 'optTeacherRecommendedData',
	// 其他老师推荐
	202: 'optOtherTeacherRecommendedData',
	// 热门知识点
	203: 'optPopularKnowledgeData',
	// 核心考点
	204: 'optCoreTestSiteData',
	// 精选专题
	205: 'optFeaturedtopicData',
	// 名校试卷
	206: 'optSchoolPaperData',
	// 精品试卷
	207: 'optCollectiblePaperData',
	// 出题来源分布
	0: 'optSourceDistributionData'
}

function mapStateToProps(state) {
	return {
		recommendation: state.recommendation,
		condition: state.chart.condition
	};
}

function getData(condition, state) {
	let url = state.currentOptionID == 0 ? RECOMMENDATION_SOURCE_URL : RECOMMENDATION_FLOW_URL;
	let key = map[state.currentOptionID];

	return getRecommendationData(url, key, {
		condition: omit(condition, 'dataOptions'),
		...state
	});
}

export class Recommendation extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
	};

	state = {
		currentOptionID: 201,
		currentTimeUnit: ENUM_VIEW.DAY,
		PV: true,
		UV: false
	};

	constructor(props) {
		super(props);
	}

	handleActive = (value) => {
		this.setState({
			PV: value == 'pv',
			UV: value == 'uv'
		}, () => {
			let { dispatch, condition } = this.props;
			dispatch(getData(condition, this.state));
		});
	};

	handleViewChange = (currentOptionID) => {
		this.setState({
			currentOptionID,
			currentTimeUnit: ENUM_VIEW.DAY
		}, () => {
			let { dispatch, condition } = this.props;
			dispatch(getData(condition, this.state));
		});
	};

	handleTimeUnitChange = (currentTimeUnit) => {
		this.setState({
			currentTimeUnit
		}, () => {
			let { dispatch, condition } = this.props;
			dispatch(getData(condition, this.state));
		});
	};

	// 点击高级筛选条件查询按钮
	handleSearch = () => {
		let { dispatch } = this.props;

		// get data
		setTimeout(() => {
			let { condition } = this.props;
			dispatch(getData(condition, this.state));
		}, 0);
	};

	// 处理日期范围变化
	handleDateRangeChange = (startDate, endDate) => {
		let { dispatch } = this.props;

		let action = setCondition('startDate', moment(startDate).format(DATE_FORMATTER));
		dispatch(action);

		action = setCondition('endDate', moment(endDate).format(DATE_FORMATTER));
		dispatch(action);

		// get data
		setTimeout(() => {
			let { condition } = this.props;
			dispatch(getData(condition, this.state));
		}, 0);
	};

	componentWillMount() {
		let { dispatch, condition } = this.props;
		dispatch(getData(condition, this.state));
	};

	render() {
		let { recommendation, condition } = this.props;
		let { startDate, endDate, subject } = condition;
		let {
			options, 
			optTeacherRecommendedData, 
			optOtherTeacherRecommendedData, 
			optPopularKnowledgeData, 
			optCoreTestSiteData, 
			optFeaturedtopicData, 
			optSchoolPaperData, 
			optCollectiblePaperData, 
			optSourceDistributionData
		} = recommendation;
		let { currentOptionID, currentTimeUnit, PV, UV } = this.state;
		let children = options.map((item, index) => (
			<Tab key={index} label={item.label} value={item.ID}></Tab>
		));
		let titlePart = PV ? '人次' : (UV ? '人数' : '未知');


		return (
			<div className='panel'>
				<TeacherFilter onSearch={this.handleSearch} />
				<ChartGroup
					onDateRangeChange={this.handleDateRangeChange}
					startDate={startDate}
					endDate={endDate}>
					<Tabs
						onChange={this.handleViewChange}
						value={currentOptionID}>
						{children}
					</Tabs>
					<Tabs
						onChange={this.handleTimeUnitChange}
						value={currentTimeUnit}>
						<Tab label='日' value={ENUM_VIEW.DAY}></Tab>
						<Tab label='周' value={ENUM_VIEW.WEEK}></Tab>
						<Tab label='月' value={ENUM_VIEW.MONTH}></Tab>
					</Tabs>
					{ currentOptionID != 0 &&
					<div style={{textAlign: 'center', padding: 10 }}>
						<FlatButton label='人次' secondary={PV} onClick={() => this.handleActive('pv')} />
						<FlatButton label='人数' secondary={UV} onClick={() => this.handleActive('uv')} />
					</div>
					}
					<div className='chart'>
					{ currentOptionID == 201 && 
						<RecommendationLineAreaChart 
							title={`用题${titlePart}转化图`}
							subtitle='名师推荐'
							dataSource={optTeacherRecommendedData.data} />
					}
					{ currentOptionID == 202 && 
						<RecommendationLineAreaChart 
							title={`用题${titlePart}转化图`}
							subtitle='其他老师推荐' 
							dataSource={optOtherTeacherRecommendedData.data}/>
					}
					{ currentOptionID == 203 && 
						<RecommendationLineAreaChart 
							title={`用题${titlePart}转化图`}
							subtitle='热门知识点' 
							dataSource={optPopularKnowledgeData.data}/>
					}
					{ currentOptionID == 204 && 
						<RecommendationLineAreaChart  
							title={`用题${titlePart}转化图`}
							subtitle='核心考点' 
							dataSource={optCoreTestSiteData.data}/>
					}
					{ currentOptionID == 205 && 
						<RecommendationLineAreaChart  
							title={`用题${titlePart}转化图`}
							subtitle='精选专题' 
							dataSource={optFeaturedtopicData.data}/>
					}
					{ currentOptionID == 206 && 
						<RecommendationLineAreaChart  
							title={`用题${titlePart}转化图`}
							subtitle='名校试卷' 
							dataSource={optSchoolPaperData.data}/>
					}
					{ currentOptionID == 207 && 
						<RecommendationLineAreaChart  
							title={`用题${titlePart}转化图`}
							subtitle='精品试卷' 
							dataSource={optCollectiblePaperData.data}/>
					}
					{ currentOptionID == 0 && 
						<PieChart  
							title={`用题${titlePart}转化图`}
							subtitle='出题来源分布' 
							dataSource={optSourceDistributionData.data}/>
					}
					</div>
				</ChartGroup>
			</div>
		);
	}
}

export default connect(
	mapStateToProps,
	// Implement map dispatch to props
)(Recommendation)
